Design Token
カオスなデザインを共通化するための変数たち
tokenの定義とともに、「定義したもの以外は基本的に使っちゃダメ」というお触れによってデザインの効率化とともに現場の暴走を防ぐ効果がある
]
palette
色情報一覧
ここではred-100やgreen-50など具体的な色の変数が登場
基本的にプロダクトの実装では直接使わない
font
フォント情
aliasを作ってもいいし、直接使ってもいい気がする
font family
font size
font weight
spacing, sizing
サイズ情報
shadow
border
基本的にはborder widthのこと
aliasでまとめて定義しても良い
radius
border radiusのこと
css utility使ってもいいのでは？とも思えるが、tokenを使うと安心感がある
animation
場合分けはこんな感じが良さそう
要素の大きさ - 3通り
S, M, L
出現と消失 - 2通り
forward, backward
合わせて6通り
alias
色や数値の情報ではなく、意味で管理するための変数一覧
color alias
paletteに意味を持たせる
primary-default: mono-100, attension-active: red-300など
font alias
button-medium: font-size-16など
cssで使うならまとめてmixin化しても良い
spacing, sizing
正直あまりalias化するメリットがあると思えない
例えばs-medium(Sサイズ画面での普通サイズ)を後で変えるとして、影響度が計り知れない